<template>
	<custom-page :float="true" title="登录" background-color="white" borderBottomColor="transparent"
		nav-background-color="transparent">
		<template #page>
			<view class="author-content">
				<view class="author-info">
					<image class="top-img" :src="asserts.ic_logo2"></image>
					<view class="top-title">欢迎来到助叫</view>
					<view class="top-content">中高端台球娱乐平台</view>	
					<!-- #ifdef MP -->
					<view class="author-tips1">
						<view class="author-point"></view>本应用将获取您的公开信息(昵称、头像等)
					</view>
					<view class="author-tips2">
						<view class="author-point"></view>允许微信授权，可以体验更多功能
					</view>
					<button class="author-button" @click="confirmGetPhonenumber($event)" 
						:open-type="isAgree ? 'getPhoneNumber':''" @getphonenumber="onGetPhoneNumber($event)">本机号码一键登录</button>
					<!-- #endif -->
					<view class="other-login" @click="toAuthorByPhone">手机号验证码登录</view>
				</view>
				<view class="agreement">
					<image class="radio-img" :src="isAgree?asserts.ic_radio_select:asserts.ic_radio_normal" @click="onAgreeChange()"></image>
					<view class="agreement-row" >
						<text>我已阅读并同意</text>
						<text class="agreement-color" @click="toServiceAgreement">《用户服务协议》</text>
						<text>和</text>
						<text class="agreement-color" @click="toPrivacyPolicies">《隐私政策》</text>
						<text>并授权助叫约球获取本机号码</text>
					</view>
				</view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	import {
		appLogo, storageTokenKey, storageUserType
	} from '../../global/config.js'
	import {
		promisic,
		isPromise,
		compareVersion
	} from '../../utils/utils.js'
	export default {
		data() {
			return {
				backType: "relaunch",
				backPage: "pages/index/index",
				backPageQuery: "",
				authorLogo: appLogo,
				loginCode: "",
				supportUserInfoEdit: false,
				registerForm: {
					loginCode: "",
					wxAvatarUrl: "",
					nickName: "",
					realName: "",
					idCard: "",
					sex: "1",
					phone: "",
					encryptedData: "",
					iv: "",
					phoneCode: ""
				},
				isAgree: false,
			}
		},
		onLoad: function(options) {
			this.backType = options.backType || "relaunch"
			this.backPage = decodeURIComponent(options.backPage || "pages/index/index")
			this.backPageQuery = decodeURIComponent(options.backPageQuery || "")
			const version = wx.getSystemInfoSync().SDKVersion
			this.supportUserInfoEdit = compareVersion(version, "2.21.2") >= 0
			const app = getApp()
			this.registerForm.refereeId = app.globalData.shareId || ""

			this.getWxCode({
				showLoading: true
			});
			
			uni.$on("authorSuccess", this.authorSuccess)
		},
		onUnload() {
			uni.$off("authorSuccess", this.authorSuccess)
		},
		methods: {
			navigateBack: function() {
				console.log("navigateBack", this.backPage)
				if (this.backType === 'back') {
					let pages = getCurrentPages();
					let delta = 1
					if (pages) {
						for (let i = 0; i < pages.length; i++) {
							if (pages[i].route == this.backPage) {
								delta = pages.length - 1 - i
								break
							}
						}
					}
					uni.navigateBack({
						delta: delta
					})
				} else if (this.backType === 'redirect') {
					uni.redirectTo({
						url: this.backPageQuery ? ("/" + this.backPage + "?" + this.backPageQuery) : ("/" +
							this.backPage)
					})
				} else {
					uni.reLaunch({
						url: this.backPageQuery ? ("/" + this.backPage + "?" + this.backPageQuery) : ("/" +
							this.backPage)
					})
				}
			},
			getWxCode: function({
				showLoading = false
			} = {}) {
				// return promisic(uni.login)({provider: "weixin"})
				// 	.then(res => {
				// 		this.loginCode = res.code
				// 		return Promise.resolve(this.loginCode)
				// 	})
				/**
				 * 通过 wx.login 接口获得的用户登录态拥有一定的时效性。
				 * 用户越久未使用小程序，用户登录态越有可能失效。
				 * 反之如果用户一直在使用小程序，则用户登录态一直保持有效。
				 * 具体时效逻辑由微信维护，对开发者透明。
				 * 开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。
				 * 登录态过期后开发者可以再调用 wx.login 获取新的用户登录态。
				 * 调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期
				 */
				if (showLoading) {
					uni.showLoading()
				}
				return promisic(uni["checkSession"])()
					.then(res => {
						console.log("checkSession", this.loginCode)
						if (!this.loginCode) {
							return promisic(uni.login)({
								provider: "weixin"
							})
						} else {
							return Promise.resolve({
								code: this.loginCode
							})
						}
					})
					.catch(err => {
						return promisic(uni.login)({
							provider: "weixin"
						})
					})
					.then(res => {
						this.loginCode = res.code
						return Promise.resolve(this.loginCode)
					})
					.finally(() => {
						if (showLoading) {
							uni.hideLoading()
						}
					})
			},
			onAgreeChange(event) {
				this.isAgree = !this.isAgree
			},
			
			toServiceAgreement: function(event) {
				uni.navigateTo({
					url: "/pages/service-agreement/service-agreement"
				})
			},
			toPrivacyPolicies: function(event) {
				uni.navigateTo({
					url: "/pages/privacy-policies/privacy-policies"
				})
			},
			confirmGetPhonenumber: async function(event) {
				if(!this.isAgree) {
					uni.showToast({
						title: "请阅读并同意用户使用协议及隐私政策"
					})
					return
				}
				await this.getWxCode({
					showLoading: true
				});
			},
			onGetPhoneNumber: function(event) {
				console.log("author-page", "onGetPhoneNumber")
				let { iv, encryptedData, code, errMsg } = event.detail
				if(errMsg != "getPhoneNumber:ok") {
					return
				}
				
				this.registerForm.encryptedData = encryptedData
				this.registerForm.iv = iv
				this.registerForm.phoneCode = code || ""
				this.registerForm.loginCode = this.loginCode || ""
				this.toAuthor()
			},
			toAuthor: function(event) {
				let params = {
					loginPlatformType: 2,
					loginMethodType: 4,
					wxCode: this.loginCode,
					wxJsCode: this.registerForm.phoneCode
				}
				console.log("wxCode: " + JSON.stringify(this.loginCode));
				console.log("wxJsCode: " + JSON.stringify(this.registerForm.phoneCode));
				this.requestCenter.userLogin(params).then(res => {
					let token = res.token || ""
					uni.setStorageSync(storageTokenKey, token || "")
					let userType = uni.getStorageSync(storageUserType)
					if(userType){
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}else{
						uni.navigateTo({
							url: '/pages/author-select-role/author-select-role'
						})
					}
				})
			},
			
			//其他手机号码登录
			toAuthorByPhone(){
				uni.navigateTo({
					url: '/pages/author-phone-page/author-phone-page'
				})
			},
			
			//登录成功回调
			authorSuccess: function(res) {
				uni.setStorageSync(storageTokenKey, res.token || "")
				this.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.author-content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: linear-gradient( 180deg, #EDFFFD 0%, #F9F8FD 100%);
	}

	.author-info {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}
	.top-img{
		width: 144rpx;
		height: 144rpx;
		margin-top: 256rpx;
		border-radius: 32rpx;
	}
	.top-title{
		color: #021624;
		font-size: 48rpx;
		line-height: 66rpx;
		margin-top: 32rpx;
	}
	.top-content{
		margin-top: 8rpx;
		color: #021624;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 230rpx;
	}

	.author-logo {
		display: block;
		width: 202rpx;
		height: 202rpx;
		overflow: hidden;
		border-radius: 101rpx;
		box-sizing: border-box;
		border: 3rpx solid #EEEEEE;
		background: #f8f8f8;
	}

	.author-tips1,
	.author-tips2{
		width: calc(100% - 124rpx);
		margin-left: 124rpx;
		font-size: 24rpx;
		color: #585F70;
		line-height: 34rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.author-tips2 {
		margin-top: 16rpx;
	}

	.author-point {
		width: 8rpx;
		height: 8rpx;
		background: #585F70;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.author-button,
	.other-login {
		width: calc(100% - 112rpx);
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		color: #ffffff;
		font-size: 26rpx;
		background: #07C160;
		border-radius: 48rpx;
		box-sizing: border-box;
		font-weight: normal;
		align-self: center;
	}

	.author-button {
		margin: 64rpx 28rpx 0 28rpx;
		background: #01CBFF;
		color: #FFFFFF;
	}

	.other-login {
		margin: 32rpx 28rpx 0 28rpx;
		background: #585F70;
		color: #EEEEEE;
	}

	.agreement {
		padding: 40rpx 0;
		margin: 0 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.agreement-row {
		flex: 1;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #888;
	}
	.agreement-color {
		color: #01CBFF;
		display: inline;
	}
	.radio-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.author-choose-avatar {
		position: relative;
		display: block;
		width: 202rpx;
		height: 202rpx;
		overflow: hidden;
		padding: 0 !important;
		background: transparent;
		margin-top: 70rpx;
	}

	.author-avatar {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 101rpx;
		box-sizing: border-box;
		border: 3rpx solid #EEEEEE;
		background: #f8f8f8;
	}

	.author-avatar-camera {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		bottom: 0;
		right: 12rpx;
		z-index: 99;
	}

	.author-form {
		margin: 60rpx 30rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.author-form-item {
		height: 116rpx;
		border-bottom: thin solid #99999926;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.author-form-item-key {
		min-width: 182rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666FF;
		flex-shrink: 0;
	}

	.author-form-item-required {
		display: inline-block;
		width: 16rpx;
		color: #DD2724FF;
		margin-right: 10rpx;
	}

	.author-form-item-val {
		flex: 1;
		overflow: hidden;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.author-form-item-val input {
		flex: 1;
		height: 88rpx;
		overflow: hidden;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333FF;
	}

	.author-form-item-val radio-group {
		flex: 1;
		height: 88rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.author-form-item-val radio {
		flex: 1;
		line-height: 88rpx;
	}

	/deep/ .input-holder-class {
		font-size: 26rpx;
		font-weight: 500;
		color: #CCCCCCFF;
	}

	.author-form-item-get-phone {
		background: transparent;
		color: #ffffff;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		flex-shrink: 0;
		padding: 0 30rpx !important;
		background: #07C160;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-weight: normal;
		align-self: center;
		flex-shrink: 0;
	}

	/deep/ radio .wx-radio-input,
	/deep/ radio .uni-radio-input {
		box-sizing: border-box;
	}

	/deep/ radio .wx-radio-input-checked,
	/deep/ radio .uni-radio-input-checked {
		background: #01CBFF !important;
		border: none !important;
	}

	.author-form-tips {
		margin: 40rpx 30rpx 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
	}

	.author-form-tips-icon {
		width: 30rpx;
		height: 30rpx;
		display: block;
		flex-shrink: 0;
	}

	.author-form-tips-text {
		flex: 1;
		overflow: hidden;
		margin-left: 10rpx;
	}

	.author-form-submit {
		height: 80rpx;
		margin: 120rpx 30rpx 30rpx 30rpx;
		text-align: center;
		line-height: 80rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: #07C160;
		border-radius: 40rpx;
		box-sizing: border-box;
		font-weight: normal;
	}

	button::after {
		border: none !important;
	}
</style>
